<template>
  <el-container>
  <Crown></Crown>
    <common-head child-name="品类管理"></common-head>

    <el-row style="text-align: left; font-size: 15px; font-weight: bolder">&nbsp;</el-row>
    <el-row style="text-align: left; font-size: 17px; font-weight: bolder">&nbsp;&nbsp;&nbsp;查询条件</el-row>

    <el-main>
      <el-form :inline="true" :model="searchCategory" ref="searchCategory" class="demo-form-inline" style="text-align: left">
        <el-form-item prop="category" label="一级品类：">
          <el-select v-model="searchCategory.categoryName" placeholder="全部">
            <el-option label="大牌专区" value="大牌专区"></el-option>
            <el-option label="智能手环" value="智能手环"></el-option>
            <el-option label="智能秤" value="智能秤"></el-option>
            <el-option label="睡眠管理" value="睡眠管理"></el-option>
            <el-option label="营养健康" value="营养健康"></el-option>
            <el-option label="护理清洁" value="护理清洁"></el-option>
            <el-option label="智能手表" value="智能手表"></el-option>
            <el-option label="血压计" value="血压计"></el-option>
            <el-option label="运动户外" value="运动户外"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-model="searchCategory.timeRange" prop="createTime" lable="创建日期：">
          <span>创建日期：</span>
          <el-date-picker
            :clearable="false"
            v-model="timeRange"
            @change="changeCreateTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-row style="float: left">
        <el-button type="primary" @click="addCategory">新增</el-button>
        <el-button type="primary" plain:true @click="offShelf">下架</el-button>
        <el-button type="danger" plain:true @click="deleteCategory">删除</el-button>
      </el-row>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="categoryId" label="品类ID" width="120"></el-table-column>

        <el-table-column prop="categoryName" label="品类名称" width="120"></el-table-column>

        <el-table-column sortable prop="categoryOrder" label="顺序" width="120"></el-table-column>

        <el-table-column prop="subcategory" label="子品类" width="120"></el-table-column>

        <el-table-column sortable value-format="yyyy-MM-dd" prop="createTime" label="创建时间" width="120"></el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showCategory(scope.$index, scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="editCategory(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--分页组件-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        background:true
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-main>

    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import commonHead from '../system/common/commonHead'
  import Crown from '../../components/Crown'

  export default {
    inject: ['reload'],
    name: "CategoryManage",
    components: {commonHead, Crown},

    data() {
      return {
        //多选
        multipleSelection: [],
        //当前页
        currentPage4: 1,
        pageSize: 5,
        pageNumber: 1,
        total: 0,


        //时间选择
        timeRange: [],

        //Crown
        mes: {
          user_name: 'Tony',
          title: '',
          router: ['首页', '商城管理', '品类管理']
        },

        //品类搜索表单
        searchCategory: {
          categoryName: '',
          beginCreateTime: '',
          endCreateTime: ''
        },

        //数据表格
        tableData: [],
      }
    },

    mounted() {
      this.created();
    },

    methods: {
      changeCreateTime(a) {
        console.log(a);
        this.searchCategory.beginCreateTime = this.timeRange[0];
        this.searchCategory.endCreateTime = this.timeRange[1];
      },

      //加载页面初始数据
      getData(){
        this.axios.get("micro-mall-server/category/getByPage",{
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize
          }
        }).then(res => {
          console.log(res.data);
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          // this.reload();
        })
      },
      created(){
        this.getData();
      },

      //重置查询条件
      reset() {
        this.searchCategory.categoryName = '';
        this.searchCategory.categoryName = '';
        this.searchCategory.beginCreateTime = '';
        this.searchCategory.endCreateTime = '';
        this.timeRange = '';
        this.search();
      },

      //条件查询(时间处理，返回值)
      search() {
        this.axios.get("micro-mall-server/category/getByPage", { params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            ...this.searchCategory
          }
          }).then(res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total;
          // this.reload();
        })
      },

      //新增品类，路由跳转后处理
      addCategory(){
        this.$router.push({
          path: '/main/addCategory',
        })
      },

      //修改品类状态，0-已下架；2-已删除
      changeStatus(categoryId, categoryStatus){
        if(categoryStatus === 0){
          this.axios.post("micro-mall-server/category/" + categoryId + "/" + categoryStatus,{
            categoryId: this.categoryId,
            categoryStatus: categoryStatus
          })
        }else if(categoryStatus === 2){
          this.axios.post("micro-mall-server/category/" + categoryId + "/" + categoryStatus,{
            categoryId: this.categoryId,
            categoryStatus: categoryStatus
          })
        }
        this.$message({
          type: 'success',
          message: '成功!',
        });
      },

      offShelf() {
        let selectCategorys = this.$refs.multipleTable.selection;
        if (!selectCategorys || selectCategorys.length === 0) {
          this.$message({
            type: 'info',
            message: '至少选择一条数据'
          });
        } else if (selectCategorys.length > 1) {
          this.$message({
            type: 'info',
            message: '只能选择一条数据'
          });
        } else if (selectCategorys.length === 1) {
          this.$confirm('确定下架?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.changeStatus(selectCategorys[0].categoryId, 0);
            this.getData();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消下架',
            });
          });
        }
      },

      //删除分类
      deleteCategory(){
        let selectCategorys = this.$refs.multipleTable.selection;
        if (!selectCategorys || selectCategorys.length === 0) {
          this.$message({
            type: 'info',
            message: '至少选择一条数据'
          });
        } else if (selectCategorys.length > 1) {
          this.$message({
            type: 'info',
            message: '只能选择一条数据'
          });
        } else if (selectCategorys.length === 1) {
          this.$confirm('确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.changeStatus(selectCategorys[0].categoryId, 2);
            this.getData();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        }
      },

      //查看当前分类具体信息，将当前id传递到下个页面
      showCategory(index, row){
        this.$router.push({
          path: '/main/showCategory',
          query: {
            categoryId: row.categoryId
          }
        })
      },

      //编辑当前分类信息
      editCategory(index, row){
        this.$router.push({
          path: '/main/editCategory',
          query: {
            categoryId: row.categoryId
          }
        })
      },

      //分页处理，当前页与单页条数
      handleCurrentChange(val){
        console.log(`当前页：${val}`);
        this.pageNumber = val;
        this.getData();
      },
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getData();
      },

      //处理选择信息变更
      handleSelectionChange(val){
        console.log('selectInformation');
        this.multipleSelection = val;
        console.log(this.multipleSelection);
      },
    },
  }

</script>

<style scoped>

</style>
